import React, { Component } from 'react'
import './MyCSSTransition.css'
import {CSSTransition} from 'react-transition-group'

export default class MyCSSTransition extends Component {
  constructor() {
    super()
    this.state = {
      show: true
    }
  }
  change() {
    this.setState({
      show: !this.state.show
    })
  }
  render() {
    return (
      <div>
        {/* in: 控制元素显示隐藏的变量 */}
        {/* timeout: 动画执行时长，单位是ms */}
        {/* classNames：对应的class名 */}
        {/* unmountOnExit：在隐藏时卸载这个元素 */}
        <CSSTransition
          in={this.state.show}
          timeout={1000}
          classNames="alert"
          unmountOnExit
        >
          <div className="div1">我要切换</div>
        </CSSTransition>
        <button onClick={()=>this.change()}>切换</button>
      </div>
    )
  }
}
